<template>
<div>
	<Table :height="heightTemp" ref="selection" :loading="loading" :columns="columns" :data="pageData.rows" @on-row-click="rowClick" @on-sort-change="sortChange">
		<!-- <slot name="template"></slot>
		<template slot-scope="{ row, index }" slot="action">
       		<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
           	<Button type="error" size="small" @click="remove(index)">Delete</Button>
       	</template>
       	 -->
	</Table>
	<div style="margin-left: 1%;margin-top: 10px;">
		<Page :total="pageData.total" :current="page" :page-size="pageSize" show-sizer show-elevator show-total @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
	</div>
</div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'abGrid',
  components: {
  },
  props: ['url', 'height'],
  data () {
    return {
    	  loading: true,
    	  heightTemp: '',
    	  page: 1,
    	  pageSize: 10,
    	  sort: '',
    	  order: '',
      columns: [],
      pageData: {
        	  rows: [],
        	  total: 10
      }
    }
  },
  created: function () {
	  this.heightTemp = this.height || 520
	  // 解析solt中的column
	  var that = this
    this.$slots.default.forEach(function (item) {
      if (item.tag != 'column') return

      // 没有 title 则使用 插槽的title
      // https://github.com/ElemeFE/element/blob/7b1d0e2aeb63f0233685521c89a49b2ef3795ea7/packages/table/src/table-column.js
      // 参考下element UI的做法吧、使用子组件来做，配合 rander方法
      var attrs = item.data.attrs || item.data
      if (!attrs.title && item.children && item.children.length == 1) {
        attrs.title = item.children[0].text
      }
      // 如果有title 则 column插槽起效
      else if (attrs.title && item.children && item.children.length > 0) {
        attrs.render = (h, params) => {
          return h(that.$slots[attrs.key || 'default'], {
            props: {
              row: params.row
            }
          })
        }
      }

      if (item.data.key) {
        item.data.attrs['key'] = item.data.key
      }
		  that.columns.push(attrs)
	  })
	  this.postPageData()
  },
  methods: {
	  // 单击行修改选中状态
	  rowClick: function (item, index) {
		  this.$refs.selection.objData[index]._isChecked = !this.$refs.selection.objData[index]._isChecked
	  },
	  // 选择分页
	  pageChange: function (page) {
		  this.page = page
		  this.postPageData()
	  },
	  // 选择页面大小
	  pageSizeChange: function (pageSize) {
		  this.pageSize = pageSize
		  this.postPageData()
	  },
	  // 排序
	  sortChange: function (data) {
		  this.order = data.order
		  this.sort = data.column.sort || data.key
		  this.postPageData()
	  },
	  // 获取页面数据
	  postPageData: function () {
		  var param = {
			  'offset': (this.page - 1) * this.pageSize,
			  'limit': this.pageSize,
			  'sort': this.sort,
			  'order': this.order
		  }
		  var that = this
		  var post = Vue.abHttpUtil.postForm(this.url, param)
		  post.then(function (result) {
			  that.loading = false
			  that.pageData = result
		  }, function (status) {
			  if (status == !0) {
				  Vue.prototype.$Message.error('加载失败！' + status)
			  }
		  })
	  }
  }
}
</script>
